<template>
  <div class="about">
    <el-row :gutter="20">
      <el-col :span="8" :offset="3">
        <div class="img">
          <el-image :src="src" style="width: 70%; height: 70%">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </el-col>
      <el-col :span="10" :offset="2">
        <!--      <el-col :span="10" style="margin-left: 10%">-->
        <h2 style="text-align: left">单词量测试</h2>
        <ul>
          <span>
        大约需要5分钟，测试你的单词量。<br>测试过程包括2步：
        </span>
          <li>
            1. 选择适合你的出题范围
          </li>
          <li>
            2. 通过50个单词得到你的大致词汇量
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" :offset="16">
        <el-select v-model="value" placeholder="测试范围" size="auto">
          <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

      </el-col>
<!--      <el-col :span="3" offset="18">-->
        <el-button type="primary" @click="validateRange">开始测试</el-button>
<!--      </el-col>-->
    </el-row>

  </div>
</template>

<style>
.about{
  margin-bottom: 20px;
  line-height: 40px;
}
</style>

<script>

export default {
  data() {
    return {
      // src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      src: 'http://mylogo3.oss-cn-beijing.aliyuncs.com/logo3/61ba4aff4a7bc2b5c68fe1381c2e201180929b44.svg',
      levels: [
        {
          value: "GMAT",
          label: "GMAT"
        },
        {
          value: "NGEE",
          label: "考研"
        },
        {
          value: "NCEE",
          label: "高考"
        },
        {
          value: "CET4",
          label: "四级"
        },
        {
          value: "CET6",
          label: "六级"
        },
        {
          value: "TEM",
          label: "英专",
          disabled: true
        },
        {
          value: "GRE",
          label: "GRE"
        },
        {
          value: "TOEFL",
          label: "托福"
        },
        {
          value: "IELTS",
          label: "雅思"
        },
        {
          value: "NONE",
          label: "任意"
        }
      ],
      value: '',
      rules: {
        value: [{required: true, message: '请选择测试范围!', trigger: blur}]
      },
      percent: 33
    }
  },
  methods: {
    test() {
      this.$axios({
        url: '/category/',
        method: 'get',
        // params:
      }).then(res => {
        console.log(res.data.data)
        this.levels = res.data.data
        console.log(this.levels)
      }).catch(err => {
        console.log(err)
      })
    },
    validateRange() {
      if (this.value === ''){
        this.$message({
          showClose: true,
          message: '请选择测试范围!',
          type: 'error'
        });
        return false
      }else{
        this.$store.commit('setTestLevel', this.value)
        console.log(this.value)
        // this.$store.commit('setPercent', this.percent)
        // console.log(this.percent)
        this.$axios.get('/vocabularies/?category=' + this.$store.getters.getTestLevel)
            .then(res => {
              const list = res.data.data
              console.log(list)
              this.$store.commit('setAllQuestions',list)
              for (let ele of list) {
                this.$store.getters.getAllRanks.push(ele.rank)
              }
            }).catch(err => {
          console.log(err)
        })
        this.$router.push('/selectWord')
      }
    }
  },
  mounted() {
    // this.$store.commit('setPercent', this.percent)
  }
}
</script>
